﻿@using PlatformNetCore.Entity
@{
    ViewBag.Title = "广告列表";
}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="search" placeholder="请输入标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-block">
                                <select name="adSlotID" lay-filter="adSlotID" lay-search>
                                    @foreach (var item in (List<SelectListItem>)ViewBag.AdSlotTypeDLL)
                                    {
                                        <option value="@item.Value">@item.Text</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="list-front-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    @if (ViewBag.right_actions != null)
                    {
                        <div style="padding-bottom: 10px;">
                            @foreach (SysRight o in ViewBag.right_actions)
                            {
                                <button class="layui-btn layui-btn-sm layuiadmin-btn-useradmin @o.SubSystem" data-type="@o.ActionType.ToLower()" curl="@o.MenuUrl" ctitle="@o.DisplayName">@o.DisplayName</button>
                            }
                        </div>
                    }
                    <table class="layui-hide" id="list-table" lay-filter="list-table"></table>
                    <script type="text/html" id="list-operation">
                        @if (ViewBag.table_actions != null && ViewBag.table_actions.Count > 0)
                        {
                            @foreach (SysRight a in ViewBag.table_actions)
                            {
                                <button class="layui-btn layui-btn-xs layuiadmin-btn-useradmin @a.SubSystem" lay-event="@a.ActionType.ToLower()" curl="@a.MenuUrl" ctitle="@a.DisplayName"><i class=" @a.Pic"></i>@a.DisplayName</button>
                            }
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="availableTpl">
    {{#  if(d.IsAvailable === 1){ }}
    <button class="layui-btn layui-btn-normal layui-btn-xs">启用</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">禁用</button>
    {{#  } }}
</script>
<script>
    //这里设置一个空的json串，用于接受表格的行信息
    var editData;

    layui.use(['table','layer','form'], function () {
        var $ = layui.$, form = layui.form, table = layui.table;
        layer = layui.layer;

        var option = {
            elem: '#list-table'
            , url: '/Admin/Ad/AdList'
            ,method: 'POST'
            , page: true //开启分页
            , request: {
                pageName: 'pageindex',
                limitName: 'pagesize'
            }
            , limit: 15
            , limits: [15, 30, 50]
            , cols: [[
                { checkbox: true }
                , { field: 'Title', title: '标题', width: 350, sort: true }
                , {
                    field: 'AdImagePC', title: '图片', width: 200,
                    templet: function (d) {
                        return '<div><img src="' + d.AdImagePC + '" style="height:28px;cursor:pointer;" onclick="previewImg(this)" /></div>';
                    }
                }
                , {
                    field: 'AdImagePC', title: '图片(移动)', width: 200,
                    templet: function (d) {
                        return '<div><img src="' + d.AdImageMobile + '" style="height:28px;cursor:pointer;" onclick="previewImg(this)" /></div>';
                    }
                }
                , {
                    field: 'AdSlotID', title: '所属广告位', width: 300, templet: function (d) {
                        if (d.AdSlot != null) {
                            return d.AdSlot.Title;
                        }
                        else {
                            return '--';
                        }
                    }
                }
                , { field: 'Link', title: '链接' }
                , { field: 'SortNo', title: '排序号', width: 80 }
                , { field: 'IsAvailable', title: '是否启用', width: 100, templet: '#availableTpl' }
                , { field: 'AddBy', title: '添加人',width:100 }
                , {
                    field: 'AddDate', title: '添加时间', width: 120, templet: function (d) {
                        return layui.util.toDateString(d.AddDate, 'yyyy-MM-dd');
                    }
                }
                , { align: 'center', fixed: 'right',title: '操作',width: 150, toolbar: '#list-operation' }
            ]]
        };
        //方法级渲染
        table.render(option);

        //监听搜索
        form.on('submit(list-front-search)', function (data) {
            var field = data.field;

            //执行重载
            table.reload('list-table', {
                where: field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //监听行工具事件
        table.on('tool(list-table)', function (obj) {
            var data = obj.data;
            console.log(obj)

            if (obj.event === 'delete') {

                //询问框
                layer.confirm('确认删除吗？', {
                    btn: ['确定', '关闭'], //按钮
                    title: '提示'
                }, function () {

                    var loadingFlag;
                    $.ajax({
                        url: "/Admin/Ad/AdDel",
                        type: "POST",
                        data: { id: data.ID },
                        beforeSend: function () {
                            //注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
                            loadingFlag = layer.msg('正在处理，请稍候……', { icon: 16, shade: 0.01, shadeClose: false, time: 10000 });
                        },
                        success: function (response) {

                            layer.close(loadingFlag);

                            if (response.success) {
                                obj.del();
                                //提交 Ajax 成功后，静态更新表格中的数据
                                layer.msg(response.msg, { icon: 1, time: 1500 }, function () {
                                    table.reload('list-table'); //数据刷新
                                });
                            } else {
                                layer.msg(response.msg, { icon: 2, time: 1500 });
                            }
                        }
                    });
                }, function () {

                });
            } else if (obj.event === 'edit') {

                console.log(data)
                editData = data;

                var url = $(this).curl || $(this).attr("curl");
                var title = $(this).ctitle || $(this).attr("ctitle");

                layer.open({
                    type: 2
                    , title: title
                    , content: url + '?id=' + data.ID
                    , maxmin: true
                    , shadeClose: true
                    , area: ['60%', '80%']
                    , btn: ['保存', '关闭']
                    , yes: function (index, layero) {

                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitID = 'useredit-submit';
                        var submit = layero.find('iframe').contents().find('#' + submitID);

                        console.log(submit)

                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var userData = data.field; //获取提交的字段

                            if (userData.IsAvailable == "on") {
                                userData.IsAvailable = 1;
                            }
                            console.log(userData);

                            var loadingFlag;

                            $.ajax({
                                url: "/Admin/Ad/AdEdit",
                                type: "POST",
                                data: userData,
                                beforeSend: function () {
                                    //注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
                                    loadingFlag = layer.msg('正在保存，请稍候……', { icon: 16, shade: 0.01, shadeClose: false, time: 10000 });
                                },
                                success: function (response) {
                                    layer.close(loadingFlag);
                                    if (response.success) {
                                        //提交 Ajax 成功后，静态更新表格中的数据
                                        layer.msg('保存成功', { icon: 1, time: 1500 }, function () {
                                            table.reload('list-table'); //数据刷新
                                            layer.close(index); //关闭弹层
                                        });
                                    } else {
                                        layer.msg(response.msg, { icon: 2, time: 1500 });
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
        });

        //事件
        var active = {
            //新增
            add: function () {

                var url = $(this).curl || $(this).attr("curl");
                var title = $(this).ctitle || $(this).attr("ctitle");

                layer.open({
                    type: 2
                    , title: title
                    , content: url
                    , maxmin: true
                    , shadeClose: true
                    , area: ['60%', '80%']
                    , btn: ['保存', '关闭']
                    , yes: function (index, layero) {

                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitID = 'useradd-submit';
                        var submit = layero.find('iframe').contents().find('#' + submitID);
                        console.log(submit)
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段
                            console.log(field);
                            var loadingFlag;
                            $.ajax({
                                url: "/Admin/Ad/AdAdd",
                                type: "POST",
                                data: data.field,
                                beforeSend: function () {
                                    //注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
                                    loadingFlag = layer.msg('正在保存，请稍候……', { icon: 16, shade: 0.01, shadeClose: false, time: 10000 });
                                },
                                success: function (response) {
                                    layer.close(loadingFlag);
                                    if (response.success) {
                                        //提交 Ajax 成功后，静态更新表格中的数据
                                        layer.msg('保存成功', { icon: 1, time: 1500 }, function () {
                                            table.reload('list-table'); //数据刷新
                                            layer.close(index); //关闭弹层
                                        });
                                    } else {
                                        layer.msg(response.msg, { icon: 2, time: 1500 });
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
        };

        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
